<script setup lang="ts">
import { ref } from 'vue';
import { useMessage } from 'naive-ui';

defineOptions({ name: 'SmartSearch' });

const searchQuery = ref('');
const activeFilter = ref('all');
const message = useMessage();

// 搜索功能
const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    message.warning('请输入搜索关键词');
    return;
  }
  // 实际项目中这里会调用搜索API
  message.info(`搜索: ${searchQuery.value} (筛选: ${activeFilter.value})`);
};

// 快速筛选
const handleFilter = (filter: string) => {
  activeFilter.value = filter;
};
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div class="flex flex-col md:flex-row gap-6">
      <div class="flex-1">
        <NInput
          v-model:value="searchQuery"
          placeholder="请输入搜索关键词..."
          class="w-full"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <SvgIcon icon="mdi-magnify" class="text-gray-400" />
          </template>
        </NInput>
      </div>
      <div class="flex flex-wrap gap-2 items-center">
        <NButton
          v-for="filter in ['all', '模型', '任务', '告警', '日志']"
          :key="filter"
          :type="activeFilter === filter ? 'primary' : 'default'"
          size="small"
          @click="handleFilter(filter)"
        >
          {{ filter }}
        </NButton>
        <NButton type="primary" @click="handleSearch">
          <SvgIcon icon="mdi-magnify" class="mr-1" />
          搜索
        </NButton>
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>